import 'dart:ui';

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutterwebsite/model/product.dart';
import 'package:flutterwebsite/pages/product_detail_page.dart';
import 'package:flutterwebsite/services/product_service.dart';
import 'package:flutterwebsite/style/color.dart';
import 'package:flutterwebsite/style/font.dart';
class ProductResultListPage extends StatelessWidget{
  //列表数据
  final ProductListModel list;

  ProductResultListPage(this.list, {this.getNextPage});

  //获取下一页数据
  final VoidCallback getNextPage;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return list.data.length==0
        ?Center(
      child: CircularProgressIndicator(),
    )
        :ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: 10),
      itemCount: list.data.length,
        itemBuilder: (BuildContext context,int i){
          ProductItemModel item=list.data[i];
          //检测到距离列表只剩下了四个item开始加载下一页
          if((i+4)==list.data.length){
            getNextPage();
          }
          return GestureDetector(
            onTap: (){
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => ProductDetailPage(item:item)
                  )
              );
            },
            child: Container(
              color: ProductColors.bgColor,
              padding: EdgeInsets.only(
                top: 5.0,
                right: 5.0
              ),
              child: Row(
                children: <Widget>[
                  //产品图片
                  Image.asset(
                    item.imageUrl,
                    width: 120.0,
                    height: 120.0,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                            width: 1,
                            color:ProductColors.dividerColor
                          )
                        )
                      ),
                      //产品信息垂直布局
                      child: Column(
                        //环绕
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            item.desc,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                          Row(
                            children: <Widget>[
                              SizedBox(
                                width: 5,
                              ),
                              //产品类型
                              Text(
                                  item.type,
                                style: TextStyle(
                                  color: ProductColors.typeColor,
                                  fontSize: 16.0,
                                ),
                              ),
                              //产品特点
                              item.point==null?SizedBox():Container(
                                child: Text(
                                  item.point,
                                  style: TextStyle(
                                    color: ProductColors.PointColor,

                                  ),
                                ),
                                padding: EdgeInsets.symmetric(horizontal: 3),
                                margin: EdgeInsets.only(left: 4),
                                decoration: BoxDecoration(border: Border.all(width: 1,color: ProductColors.PointColor)),
                              ),
                            ],
                          ),
                          //产品名称
                          Text(
                            item.name,
                            style: ProductFonts.itemNameStyle,
                          )
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          );
        }
    );

  }




}
